<template>
  <div class="app-container" style="background-color: #f4f4f4; padding: 0 15px;" @click="closeRightMenu">
    <div class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="18">
            <!--                            <el-form-item label="是否出院" prop="inFlag">-->
            <!--                                <el-radio-group v-model="queryParams.inFlag" border @change="handleQuery">-->
            <!--                                    <el-radio-button value="">全部</el-radio-button>-->
            <!--                                    <el-radio-button value="1">在院</el-radio-button>-->
            <!--                                    <el-radio-button value="2">已出院</el-radio-button>-->
            <!--                                </el-radio-group>-->
            <!--                            </el-form-item>-->
            <el-form-item label="空床" prop="bedBlank">
              <el-radio-group v-model="queryParams.bedBlank" border @change="handleQuery">
                <el-radio-button value="">全部</el-radio-button>
                <el-radio-button value="Y">占用</el-radio-button>
                <el-radio-button value="N">未占用</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="费别" prop="chargeType">
              <el-select v-model="queryParams.chargeType" class="width-120" clearable
                         placeholder="请选择费别" @change="handleQuery">
                <el-option v-for="dict in dictDataMap['medical_insurance_type']" :key="dict.dictValue"
                           :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <template #icon>
                  <i-ep-search/>
                </template>
                搜索
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
                        <span class="mr20" style="float: right;color: #007fff;">
                            总床位：{{ bedRecGroupInfo.count }}<span class="ml10 mr10"> | </span>
                            <span style="color: #ff0000">占用：{{ bedRecGroupInfo.notEmptyBed }}</span><span
                          class="ml10 mr10"> | </span>
                            空床：{{ bedRecGroupInfo.emptyBed }}
                        </span>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <!--            <div style="display: ruby;">-->
      <right-menu v-model="menuSetting" :data="rightMenuList" :model-value-info="modelValue" theme="light"
                  @update-modelValue="updateModelValue"/>
      <el-space style="margin-bottom: 50px" wrap>
        <template v-for="(item, index) in bedRecList">
          <el-card :id="'patientCard-' + index" class="bed-card mr10" shadow="hover"
                   @dblclick="cardDblClick(item, index)"
                   @click.stop="cardClick(item, index)"
                   @contextmenu.prevent.native="openMenu($event, item, index)">
            <template #header>
              <div class="card-header">
                <div style="display: flex;">
                  <div v-if="item.visitId" class="card-div div-conter mr5" style="flex: 0.8">
                      <span class="card-header-name">{{
                          item.name
                        }}</span>
                    <span class="card-header-sex">
                        {{
                        dictStore.getMateDictInfo(
                          dictDataMap['sys_user_sex'], item.sex).dictValue === '1'
                          ? '男'
                          : '女'
                      }}
                      </span>
                    <span class="card-header-sex">
                        {{ item.ageAll }}
                      </span>
                  </div>
                  <div v-else class="card-div div-conter mr5"
                       style="padding-right: 12px;flex: 0.8;font-size: 14px;font-weight: bold;color: #333338;">
                    暂无患者
                  </div>
                  <div class="div-conter mr5" style="flex: 0.1; margin-top: -9px;">
                    <el-button @click.stop="openMenu($event, item, index)">
                      <template #icon>
                        <i-ep-expand/>
                      </template>
                    </el-button>
                  </div>
                  <div v-if="item.visitId" :style="{
                      flex: '0.2',
                      backgroundColor: item.nursingClass === '1' ? '#FF634E' : '#4E64F6'
                      }"
                       class="div-conter mr5 bed-card-show"
                  >{{
                      item.bedNo
                    }}
                  </div>
                  <div v-else class="div-conter mr5 bed-card-show"
                       style="flex: 0.2;background-color:#939393">{{ item.bedNo }}
                  </div>
                </div>
              </div>
            </template>
            <div class="center-div mb5"><span>住&nbsp;&nbsp;院&nbsp;&nbsp;号</span>:
              <span class="ys-css">{{ item.hospitalNo }}</span>
            </div>
            <div class="center-div mb5"><span>护理等级</span>：
              <el-select v-model="item.nursingClass" :class="'nurse-class' + index"
                         :disabled="true"
                         :style="{
                                      width: '50%',
                                      flex: '0.2',
                                      borderRadius: '5px',
                                      border: item.nursingClass === '1' ? '1px solid #FF634E' : '1px solid #e4e7ed'
                                      }"
                         placeholder="请选择护理等级"
                         @change="nurseClassChange($event, index, item)"
                         @click="modelValue.status = false">
                <el-option v-for="nurseClass in nurseClassList" :key="nurseClass.dictValue"
                           :label="nurseClass.dictLabel" :value="nurseClass.dictValue">
                  <div>
                    <el-tag :type="nurseClass.listClass">
                      {{ nurseClass.dictLabel }}
                    </el-tag>
                  </div>
                </el-option>
              </el-select>
            </div>
            <div class="center-div mb5"><span>入院情况</span>：
              <dict-data-tag v-if="item.visitId" :options="dictDataMap['admission_situation_dict']"
                             :value="item.hospitalSituation"
                             style="margin-left: 69px;margin-top: -18px;"/>
              <el-tag v-else type="info">无</el-tag>
            </div>
            <div class="center-div mb5">
              <span>诊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;断</span>：
                <el-tooltip :content="item.diagnosisStr" class="item" effect="dark" placement="top">
                  <span style="width: 160px !important;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: -5px;">
                    {{ item.diagnosisStr }}</span>
                </el-tooltip>
            </div>
            <div class="center-div mb5"><span>费用类别</span>：{{
                dictStore.getMateDictInfo(
                  dictDataMap["medical_insurance_type"],
                  item.chargeType
                )
                  ? dictStore.getMateDictInfo(
                    dictDataMap["medical_insurance_type"],
                    item.chargeType
                  ).dictLabel
                  : ""
              }}
            </div>
            <div class="center-div mb5"><span>入院时间</span>：<span style="color: #007fff;">{{
                item.admissionTime
              }}</span></div>
            <div class="center-div mb5"><span>主治医生</span>：{{ item.doctorInChargeName }}</div>
            <div class="center-div mb5"><span>入院科室</span>：{{ item.deptAdmissionToName }}</div>
            <div class="center-div mb5"><span>责任护士</span>：<span>
                <el-select
                  v-model="item.dutyNurse"
                  :class="'nurse-class' + index"
                  :disabled="!item.visitId"
                  placeholder="请选择"
                  :style="{
                    width: '50%',
                    flex: '0.2',
                    borderRadius: '5px',
                    border: item.nursingClass === '1' ? '1px solid #FF634E' : '1px solid #e4e7ed'
                  }"
                  @change="nurseChange($event, item, '1', index)"
                  @click="modelValue.status = false">
                  <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                             :value="item.userId"/>
                  </el-select>
            </span>
            </div>
            <div class="center-div mb5"><span>质控护士</span>：<span>
                <el-select
                  v-model="item.qualityNurse"
                  :class="'nurse-class' + index"
                  :disabled="!item.visitId" :style="{
                              width: '50%',
                              flex: '0.2',
                              borderRadius: '5px',
                              border: item.nursingClass === '1' ? '1px solid #FF634E' : '1px solid #e4e7ed'
                            }"
                  placeholder="请选择"
                  @change="nurseChange($event, item, '2',index)"
                  @click="modelValue.status = false">
                    <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                               :value="item.userId"/>
                </el-select>
            </span></div>
            <template #footer>
              <div class="footer-div" style="background-color: #dadada">
                <div class="footer-div-info">
                  <div class="footer-div-info-num">
                    {{
                      item.patPrepaymentSum
                        ? item.patPrepaymentSum.toFixed(2) : 0.00
                    }}
                  </div>
                  <div class="footer-div-info-text">
                    预交金(元)
                  </div>
                </div>
                <div class="footer-div-info">
                  <div class="footer-div-info-num">
                    {{
                      item.expensesIncurred ?
                        item.expensesIncurred.toFixed(2) :
                        0.00
                    }}
                  </div>
                  <div class="footer-div-info-text">
                    发生费用(元)
                  </div>
                </div>
                <div class="footer-div-info">
                  <div class="footer-div-info-num">
                    {{ item.balance ? item.balance.toFixed(2) : 0.00 }}
                  </div>
                  <div class="footer-div-info-text">
                    余额(元)
                  </div>
                </div>
                <div class="footer-div-info">
                  <div class="footer-div-info-num">
                    {{
                      item.hospitalizationDays ? item.hospitalizationDays : "无"
                    }}
                  </div>
                  <div class="footer-div-info-text">
                    住院天数
                  </div>
                </div>
              </div>
            </template>
          </el-card>
        </template>
      </el-space>
    </div>
    <el-dialog v-model="dialogVisible" :append-to-body="true" :close-on-click-modal='false' :show-close="false"
               :title="dialogTitle" :width="dialogWidth" @close="handleClose">
      <template #header>
        <div class="ml20 fz15" style="color: #00c0ef">
          <span class="mr20" style="font-size: 16px;font-weight: bold;color: #484848">{{ dialogTitle }}</span>
          <template v-if="isShowDialogPatientInfo">
                        <span class="fz15 mr5" style="color: #7171ff">{{
                            patientItem.name
                          }}
                    </span>
            <span class="mr10"><span class="mr5">{{ patientItem.ageAll }}</span>
                            <svg-icon :icon-class="dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], patientItem.sex)
                                .dictValue === '1'
                                ? 'man'
                                : 'woman'
                                "/>&nbsp;&nbsp;|</span>
            <span>住院号：<span class="ys-css">{{ patientItem.hospitalNo }}&nbsp;&nbsp;|</span></span>
            <span>床号：<span class="ys-css">{{ patientItem.bedNo }}&nbsp;&nbsp;|</span></span>
            <span>收费类别：<span class="ys-css">{{
                dictStore.getMateDictInfo(
                  dictDataMap["medical_insurance_type"],
                  patientItem.chargeType
                )
                  ? dictStore.getMateDictInfo(
                    dictDataMap["medical_insurance_type"],
                    patientItem.chargeType
                  ).dictLabel
                  : ""
              }}</span>
                    </span>
          </template>

        </div>
      </template>
      <!-- 移入病区 -->
      <transfer-to-the-ward-vue v-if="dialogType === 'transferToTheWardIndex'" ref="transferToTheWardRef"
                                @transfer-to-the-ward-ok="transferToTheWardOk"/>
      <!-- 病人信息 -->
      <patient-info v-if="dialogType === 'patientInformation'" ref="patientInfRef" :org-id="userInfo.orgId"
                    :patient-id="patientIdThis" :visit-id="visitIdThis" @save-ok="dialogClick"/>
      <!-- 诊断 -->
      <diagnosis v-if="dialogType === 'diagnosis'" ref="diagnosisRef" :is-doctor="false"
                 :org-id="userInfo.orgId"
                 :patient-id="patientIdThis" :visit-id="visitIdThis"/>
      <!-- 退药 -->
      <drug-repercussion-index v-if="dialogType === 'drugRepercussionIndex'" ref="drugRepercussionIndexRef"
                               :is-return-ok="false" :patient-id="patientIdThis" :visit-id="visitIdThis"/>
      <!-- 费用查询 -->
      <inp-bill-detail v-if="dialogType === 'inpBillDetailIndex'" ref="inpBillDetailRef"
                       :is-show-query="false" :patient-id="patientIdThis" :visit-id="visitIdThis"/>
      <!-- 退费（非药品） -->
      <refund-item v-if="dialogType === 'refundItemIndex'" ref="refundItemRef"
                   :is-show-query="false" :patient-id="patientIdThis" :visit-id="visitIdThis"/>
      <!-- 出院未做项目 -->
      <discharged-not-done-item v-if="dialogType === 'dischargedNotDoneItemIndex'"
                                ref="dischargedNotDoneItemRef"
                                :is-show-query="false" :patient-id="patientIdThis" :visit-id="visitIdThis"
      />
      <!-- 护士固定费用录入 -->
      <nurse-auto-item v-if="dialogType === 'nurseAutoItemEnterIndex'"
                       :is-show-query="true" c
                       :patient-id="patientIdThis" :show-params="showParams" :visit-id="visitIdThis"/>
      <!-- 护士费用补录 -->
      <nurse-bill-detail v-if="dialogType === 'nurseBillDetailIndex'" ref="nurseBillDetailRef"
                         :is-show-query="true"/>
      <!-- 出院确认 -->
      <nurse-pat-discharge v-if="dialogType === 'nursePatDischargeIndex'" ref="nursePatDischargeRef"
                           :patient-id="patientIdThis" :visit-id="visitIdThis" @save-ok="dischargeSaveOk"/>
      <!-- 转抄医嘱查看 -->
      <order-status-two-orders v-if="dialogType === 'orderStatusTwoOrdersIndex'" ref="orderStatusTwoOrdersRef"
                               :is-show-query="true" :order-status="orderStatus"/>

      <!-- 检查单查看 -->
      <nurse-exam-view v-if="dialogType === 'nurseExamViewIndex'" ref="nurseExamViewRef"/>
      <!-- 检验单查看 -->
      <nurse-lab-view v-if="dialogType === 'nurseLabViewIndex'" ref="nurseLabViewRef"/>
      <!-- 处方查看 -->
      <nurse-prescription-view v-if="dialogType === 'nursePrescriptionViewIndex'" ref="nursePrescriptionViewRef"/>
      <!-- 在院患者查看 -->
      <nurse-patient-table v-if="dialogType === 'nursePatientTableIndex'" ref="nursePatientTableRef"/>
      <!-- 出院病人列表 -->
      <nurse-leave-hospital-patient-table v-if="dialogType === 'nurseLeaveHospitalTableIndex'"
                                          ref="nurseLeaveHospitalTableRef"/>
      <!-- 瓶签页面 -->
      <order-label v-if="dialogType === 'orderLabelIndex'" ref="orderLabelRef"/>

      <classification-execution-form v-if="dialogType === 'classificationExecutionFormIndex'"
                                     ref="classificationExecutionFormRef"/>

      <!-- 床位卡 -->
      <bed-card v-if="dialogType === 'bedCardIndex'" ref="bedCardRef"/>
      <!-- 医嘱打印页面 -->
      <orders-list v-if="dialogType === 'orderListPrintIndex'" ref="orderListPrintRef"/>
      <!-- 换床 -->
      <div v-if="dialogType === 'alterBedIndex'">
        <div class="mb20">当前床位号：{{ patientItem.bedNo }}</div>
        <div style="float: left;">新床位号：</div>
        <div style="float: left; width: 280px">
          <bed-select ref="alterBedRef" :bed-id="alterBedId"
                      :disabled='false' :org-id="userInfo.orgId" :ward-code="currentSelectDept"
                      @bed-change="alterBedChange"/>
        </div>
      </div>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">关  闭</el-button>
                     <el-button v-if="showConfirmButton" type="primary" @click="confirmClick">
                        {{
                         dialogType === 'patientInformation' ? '保存' :
                           dialogType === 'drugRepercussionIndex' ? '确认退药' :
                             dialogType === 'refundItemIndex' ? '确认退费' : '确定'
                       }}
                </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";
import {alterBedOk, cancelMoveInOk, getBedRecGroup, listBedRecAndPatient} from "@/api/nurse/bedRec.ts";
import {updatePatVisit} from '@/api/hospitalization/patVisit';
import {getOrgVsUserList} from '@/api/system/user';
import {listSysOrgDict} from "@/api/system/sysOrgDict";
import {checkNotDoneApplyMap} from "@/api/patDischarge/patDischarge.ts";
// 移入病区组件
import transferToTheWardVue from './transferToTheWard.vue';
import patientInfo from "@/views/doctor/visitDoctor/patientInfo/patientInfo.vue";
import diagnosis from "@/views/doctor/visitDoctor/patientInfo/diagnosis.vue";
import drugRepercussionIndex from "@/views/drug/drugDisp/drugRepercussionIndex.vue"
import inpBillDetail from "@/views/hospitalization/inpBillDetail/index.vue"
import refundItem from "@/views/hospitalization/inpBillDetail/refundItem.vue"
import dischargedNotDoneItem from "@/views/nurse/dischargedNotDoneItem/index.vue"
import nurseAutoItem from "@/views/nurse/nurseAutoItem/index.vue"
import nursePatDischarge from "@/views/nurse/nursePatDischarge.vue";
import orderStatusTwoOrders from "@/views/nurse/business/orderStatusTwoOrders.vue"
import NurseExamView from "@/views/nurse/dischargedNotDoneItem/nurseExamView.vue";
import nurseLabView from "@/views/nurse/dischargedNotDoneItem/nurseLabView.vue"
import nursePrescriptionView from "@/views/nurse/dischargedNotDoneItem/nursePrescriptionView.vue"
import NursePatientTable from "@/views/nurse/query/nursePatientTable.vue";
import NurseLeaveHospitalPatientTable from "@/views/nurse/query/nurseLeaveHospitalPatientTable.vue";
import OrderLabel from "@/views/nurse/nursePrint/orderLabel.vue";
import BedCard from "@/views/nurse/nursePrint/bedCard.vue";
import ClassificationExecutionForm from "@/views/nurse/nursePrint/classificationExecutionForm.vue";
import OrdersList from "@/views/nurse/nursePrint/ordersList.vue";
import NurseBillDetail from "@/views/hospitalization/inpBillDetail/nurseBillDetail.vue";
import eventBus from "@/utils/eventBus.ts";
import {template} from "lodash";

const emits = defineEmits(["cardDblClick", "selectOrderStatusInCountFun"])
const dialogVisible = ref(false)
// 是否显示弹出框头部中的患者信息
const isShowDialogPatientInfo = ref(true)
const showConfirmButton = ref<boolean>(true); // 默认显示确认按钮
const patientIdThis = ref<string>("")
const visitIdThis = ref<string>("")
// 右键 床位卡 选中患者信息
const patientItem = ref<any>({})
const showParams = ref<any>({
  visitId: visitIdThis.value
})

// 换床-> 选择的新床位id
const alterBedId = ref("")
// 侧边弹出框 标题
const dialogTitle = ref("")
const dialogWidth = ref("60%")
// 医嘱弹出框 参数 2：转抄 ，1 新开
const orderStatus = ref("2")

const patientInfRef = ref()
const diagnosisRef = ref()
const drugRepercussionIndexRef = ref()
const inpBillDetailRef = ref()
const refundItemRef = ref()
const nurseAutoItemEnterRef = ref()
const dischargedNotDoneItemRef = ref()
const nursePatDischargeRef = ref()
const alterBedRef = ref()
const orderStatusTwoOrdersRef = ref()
const nurseExamViewRef = ref()
const nurseBillDetailRef = ref()
const nurseLabViewRef = ref()
const nursePrescriptionViewRef = ref()
const nursePatientTableRef = ref()
const nurseLeaveHospitalTableRef = ref()
const orderLabelRef = ref()
const bedCardRef = ref()
const classificationExecutionFormRef = ref()
const orderListPrintRef = ref()

const {proxy} = getCurrentInstance() as any;
const currentSelectDept = ref<string>(proxy.$currentSelectDept)
const dictStore = useDictStoreHook();
const useUserStore = useUserStoreHook();
const bedRecList = ref<any>([])
// 右侧弹出框显示内容
const dialogType = ref("patientInformation")
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
let dictDataMap = ref(dictStore.isTypeGetData('pay_way_dict', 'medical_insurance_type', 'entry_and_exit_hospital_status', 'sys_user_sex',
  'pat_prepayment_type', 'admission_situation_dict'
))

// 移入病区组件
const transferToTheWardRef = ref()
// 护理字典集合
const nurseClassList = ref<any>([])
// 选中可是下用户list
const orgVsUserList = ref<any>([])
const modelValue = ref({
  status: false,
  x: 0,
  y: 0,
})
const menuSetting = ref({
  status: false,
  x: 0,
  y: 0,
})
const rightMenuList = ref<any>([])
const bedRecGroupInfo = ref<any>({
  count: 0,
  emptyBed: 0,
  notEmptyBed: 0
})


const queryParams = ref<any>({
  bedBlank: "",
  inFlag: '1'
})

function getBedRecGroupFun() {
  if (currentSelectDept.value) {
    getBedRecGroup(currentSelectDept.value, userInfo.orgId).then((res: resType) => {
      if (res.data) {
        bedRecGroupInfo.value.count = res.data.count
        bedRecGroupInfo.value.emptyBed = res.data.emptyBed
        bedRecGroupInfo.value.notEmptyBed = res.data.notEmptyBed
      }
    })
  }
}

function handleQuery() {
  getList()
}

function getList() {
  if (currentSelectDept.value) {
    const data = {
      wardCode: currentSelectDept.value,
      orgId: userInfo.orgId,
      bedBlank: queryParams.value.bedBlank,
      chargeType: queryParams.value.chargeType,
      inFlag: queryParams.value.inFlag,
      wardFlag: "Y",
    }
    listBedRecAndPatient(data).then((res: resType) => {
      bedRecList.value = res.data
      bedRecList.value.forEach((item: any) => {
        let patPrepaymentSumThis = 0 as number
        if (item.patPrepaymentVos) {
          item.patPrepaymentVos.forEach((patPrepayment: any) => {
            patPrepaymentSumThis += Number(patPrepayment.amountOfMoney)
          })
          item.patPrepaymentSum = patPrepaymentSumThis
        }
        item.balance = item.patPrepaymentSum - item.expensesIncurred
        item.expensesIncurred = Number(item.expensesIncurred)
      })
      emits("selectOrderStatusInCountFun", currentSelectDept.value)
      setTimeout(() => {
        bedRecList.value.forEach((item, index) => {
          nurseClassChangeOk(item.nursingClass, index, item)
        })
      });
    })
  }
}


/** 查询机构字典（护理等级） */
function listSysOrgDictFun() {
  listSysOrgDict({orgId: userInfo.orgId, dictType: "nurse_class"}).then((res: resType) => {
    nurseClassList.value = res.data
  })
}

function getOrgVsUserListFun() {
  getOrgVsUserList({deptId: currentSelectDept.value}).then((res: resType) => {
    orgVsUserList.value = res.data
  })
}

/**
 * 关闭右键菜单
 */
function closeRightMenu() {
  modelValue.value.status = false
  modelValue.value.x = 0
  modelValue.value.y = 0
}

function cardClick(item: any, index: number) {
  closeRightMenu()
  cardClickOk(item, index)
}

function cardClickOk(item: any, index: number) {
  const cardRef = "patientCard-" + index;
  for (let i = 0; i < bedRecList.value.length; i++) {
    if (index === i) {
      const myDivParent = document.getElementById(cardRef) as HTMLElement;
      myDivParent.style.backgroundColor = "rgb(118 204 237 / 53%)";
    } else {
      const cardRef = "patientCard-" + i;
      const myDivParent = document.getElementById(cardRef) as HTMLElement;
      myDivParent.style.backgroundColor = "#ffffff";
    }
  }

}

function updateModelValue(obj: any) {
  modelValue.value = obj
}

function openMenu(event, item: any, index: number) {
  rightMenuList.value = []
  visitIdThis.value = item.visitId
  patientIdThis.value = item.patientId
  patientItem.value = item
  cardClickOk(item, index)
  // 获取鼠标点击的坐标位置
  const x = event.clientX
  const y = event.clientY

  modelValue.value.status = true
  modelValue.value.x = x
  modelValue.value.y = y
  if (!item.visitId) {
    // 空床
    rightMenuList.value = [
      {
        name: '移入病区',
        click: () => {
          transferToTheWard(item)
        }
      }
    ]
  } else {
    rightMenuList.value = [
      {
        name: '病人流转 ▶',
        outline: true,
        child: [
          {
            name: '撤销移入',
            click: () => {
              cancelMoveIn(item)
            }
          },
          // {
          //     name: '取消移出',
          //     click: () => {
          //         cancelRemoval(item)
          //     }
          // },
          {
            name: '出院',
            enable: !!item.settledType,
            click: () => {
              outHospital(item)
            }
          }
        ]
      },
      {
        name: '床位 ▶',
        outline: true,
        child: [
          {
            name: '换床',
            click: () => {
              alterBed(item)
            }
          },
          {
            name: '包床',
            click: () => {
              contractBed(item)
            }
          }
        ]
      },
      {
        name: '医嘱信息',
        click: () => {
          ordersInfo(item)
        }
      },
      {
        name: '病人信息',
        click: () => {
          patientInformationClick(item)
        }
      },
      {
        name: '诊断',
        // 下划线
        outline: true,
        click: () => {
          diagnosisClick(item)
        }
      },
      {
        name: '书写病历 ▶',
        outline: true,
        child: [
          {
            name: '体温单',
            click: () => {
              temperatureChartClick(item)
            }
          },
          {
            name: '护理文书',
            click: () => {
              emrURLClick(item)
            }
          },
        ]
      },


      {
        name: '退费',
        click: () => {
          refundItemClick(item)
        }
      },
      {
        name: '退药',
        click: () => {
          drugRepercussionClick(item)
        }
      },
      {
        name: '费用核对',
        click: () => {
          costsSelectClick(item)
        }
      }, {
        name: '费用补录',
        click: () => {
          eighteenClick()
        }
      },
      {
        name: '固定费用录入',
        click: () => {
          nurseAutoItemEnterClick(item)
        }
      },
      {
        name: '出院未做项目',
        outline: true,
        click: () => {
          dischargedNotDoneItemClick(item)
        }
      },
      {
        name: '打印 ▶',
        outline: true,
        child: [
          {
            name: '床头卡',
            click: () => {
              bedCardClick(item)
            }
          },
          {
            name: '腕带',
            click: () => {
              cancelMoveIn(item)
            }
          },
          {
            name: '瓶签',
            click: () => {
              orderLabelClink(item)
            }
          }, {
            name: '执行单',
            click: () => {
              cancelRemoval(item)
            }
          }
        ]
      },
    ]
  }

}

/** 修改护理等级询问 */
function nurseClassChange(event, index: number, item: any) {
  nurseClassChangeOk(event, index, item)
  if (item) {
    updatePatVisit({orgId: userInfo.orgId, visitId: item.visitId, nursingClass: event}).then(() => {
      ElMessage.success("护理等级修改成功");
      getList()
    })
  }
}

/**
 * 责任、质控护士修改事件
 */
function nurseChange(event, item, type, index) {
  let message = "";
  let nurse = <any>{};
  nurse.visitId = item.visitId
  nurseClassChangeOk(event, index, item)
  if (item) {
    if (type === "1") {
      nurse.dutyNurse = event
      message = "责任护士修改成功";
    } else {
      nurse.qualityNurse = event
      message = "质控护士修改成功";
    }
    updatePatVisit(nurse).then(() => {
      ElMessage.success(message);
      getList()
    })
  }
}

/** 护理等级修改确认 */
function nurseClassChangeOk(event, index: number, item) {
  let style = {
    backColor: "fef0f0",
    color: "ff0000"
  }
  // 获取选中的数据与元数据匹配项
  const nurseClassIndex = nurseClassList.value.findIndex(obj => {
    return obj.dictValue == event
  })
  if (nurseClassIndex > -1) {
    const nurseClassInfo = nurseClassList.value[nurseClassIndex]
    style = proxy.$mateStyle(nurseClassInfo);
    const nurseClassRef = "nurse-class" + index;
    const elements = document.getElementsByClassName(nurseClassRef);
    // 遍历所有获取到的元素
    for (let i = 0; i < elements.length; i++) {
      // 对元素设置背景色
      elements[i].children[0].style.backgroundColor = style.backColor;
      // 对元素设置字体颜色
      if (item.visitId) {
        elements[i].children[0].children[0].children[1].children[0].style.color = style.color;
      } else {
        elements[i].children[0].children[0].children[0].children[0].style.color = style.color;
      }
    }
  }
}

/**
 * 患者床位卡双击事件
 */
function cardDblClick(obj: any, index: number) {
  if (!obj.visitId) {
    return ElMessage.error("这个床位是空的，请先安排患者后再操作")
  }
  emits("cardDblClick", obj, index + 1)
}


// const el = document.getElementById('my-element')
// el.style.color = 'green'
// forceReflow(element) {
//   return element.offsetHeight
// }app-container
/**
 * 撤销移入
 */
function cancelMoveIn(item) {
  ElMessageBox.confirm('确认要进行【撤销移入】操作吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 撤销移入
    const data = {
      visitId: visitIdThis.value,
      patientId: patientIdThis.value,
      bedId: item.bedId
    }
    cancelMoveInOk(data).then(() => {
      ElMessage.success("撤销移入成功")
      alterBedId.value = ""
      dialogVisible.value = false
      getList()
    })
  }).catch(() => {
  })
}

/**
 * 患者医嘱操作
 */
function ordersInfo(item) {
  cardDblClick(item, 0)
}

/**
 * 患者出院
 */
function outHospital(item) {
  const param = {
    visitId: visitIdThis.value,
    orgId: userInfo.orgId
  }
  checkNotDoneApplyMap(param).then((res: resType) => {
    const data = res.data;
    if (data) {
      const status = data.status
      if (status !== '0') {
        dischargedNotDoneItemClick(item)
      } else {
        nursePatDischargeClick(item, "出院确认")
      }
    }
  })
}

/**
 * 换床
 */
function alterBed(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "换床"
  dialogWidth.value = '30%'
  dialogType.value = "alterBedIndex"
  dialogVisible.value = true
}

/**
 * 换床选择框点击事件
 * @param obj
 */
function alterBedChange(obj: any) {
  alterBedId.value = obj.bedId
}

/**
 * 包床
 */
function contractBed(item) {
  alert("正在建设中......")
}

/**
 * 取消移出
 */
function cancelRemoval(item) {
  alert("正在建设中......")
}

/**
 * 移入病区
 */
function transferToTheWard(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "移入病区"
  dialogType.value = "transferToTheWardIndex"
  dialogVisible.value = true
  showConfirmButton.value = false
  nextTick(() => {
    transferToTheWardRef.value.openTransferToTheWard(item)
  })
}


/**
 * 病人信息
 */
function patientInformationClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "病人信息"
  dialogWidth.value = '50%'
  dialogType.value = "patientInformation"
  dialogVisible.value = true
  nextTick(() => {
    patientInfRef.value.initOpen(visitIdThis.value, patientIdThis.value)
  })
}

/**
 * 诊断
 */
function diagnosisClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "病人诊断"
  dialogWidth.value = '80%'
  dialogType.value = "diagnosis"
  dialogVisible.value = true
  nextTick(() => {
    diagnosisRef.value.initOpen(visitIdThis.value, patientIdThis.value)
  })
}

/**
 * 体温单
 * @param item
 */
function temperatureChartClick(item) {
  const emrURL = 'http://123.139.118.82:9000' //临时写法
  //链接跳转
  let url = `${emrURL}/emrcloud/showRecord/transfer?from=his&name=NursingEntry&orgId=${userInfo.orgId}&patientRegId=${visitIdThis}
    &userId=${userInfo.userId}&currentDeptAreaId=${currentSelectDept.value}&p1=his&p2=his`
  window.open(url, "_blank")
}

/**
 * 护理文书
 * @param item
 */
function emrURLClick(item) {
  const emrURL = 'http://123.139.118.82:9000' //临时写法
  //链接跳转
  let url = `${emrURL}/emrcloud/showRecord/transfer?from=his&name=InpNurseEditor&orgId=${userInfo.orgId}
    &patientRegId=${visitIdThis}&userId=${userInfo.userId}&currentDeptAreaId=${currentSelectDept.value}&p1=his&p2=his`
  window.open(url, "_blank")
}

/**
 * 退药
 */
function drugRepercussionClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "退药"
  dialogWidth.value = '80%'
  dialogType.value = "drugRepercussionIndex"
  dialogVisible.value = true
  nextTick(() => {
    const obj = {
      visitId: visitIdThis.value,
      patientId: patientIdThis.value,
    }
    drugRepercussionIndexRef.value.initOpen(obj)
  })
}

/**
 * 退费
 */
function refundItemClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "退费"
  dialogWidth.value = '90%'
  dialogType.value = "refundItemIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    refundItemRef.value.initOpen(obj)
  })
}

/**
 * 费用查询
 */
function costsSelectClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = '费用核对'
  dialogWidth.value = '80%'
  dialogType.value = "inpBillDetailIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    inpBillDetailRef.value.initOpen(obj)
  })
}

/**
 * 固定费用录入
 */
function nurseAutoItemEnterClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "固定费用录入"
  dialogWidth.value = '80%'
  dialogType.value = "nurseAutoItemEnterIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    nurseAutoItemEnterRef.value.initOpen(obj)
  })
}

/**
 * 出院未做项目
 */
function dischargedNotDoneItemClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "出院未做项目列表"
  dialogWidth.value = '80%'
  dialogType.value = "dischargedNotDoneItemIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    dischargedNotDoneItemRef.value.initOpen(obj)
  })
}

/**
 * 床位上 打印菜单栏下 医嘱瓶签打印
 * @param item
 */
function orderLabelClink(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "医嘱瓶签打印"
  dialogWidth.value = '80%'
  dialogType.value = "orderLabelIndex"
  dialogVisible.value = true
  nextTick(() => {
    orderLabelRef.value.initVisitOrderLabel(false, visitIdThis.value)
  })
}

/**
 * 床位上 打印菜单栏下 患者床头卡打印
 * @param item
 */
function bedCardClick(item) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = "患者床头卡打印"
  dialogWidth.value = '56%'
  dialogType.value = "bedCardIndex"
  dialogVisible.value = true
  nextTick(() => {
    bedCardRef.value.propsBedCardListFun(visitIdThis.value)
  })
}

/**
 * 出院确认
 * @param item
 * @param str
 */
function nursePatDischargeClick(item, str) {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = str
  dialogWidth.value = '35%'
  dialogType.value = "nursePatDischargeIndex"
  dialogVisible.value = true
  nextTick(() => {
    nursePatDischargeRef.value.initOpen(toRaw(patientItem.value))
  })
}


function transferToTheWardOk() {
  dialogVisible.value = false
  getList()

}


// 弹出框 取消事件
function handleClose() {
  if (dialogType.value === 'transferToTheWard') {
    transferToTheWardRef.value.empty()
  } else if (dialogType.value === 'patientInformation') {
    nextTick(() => {
      patientInfRef.value.empty()
    })
  } else if (dialogType.value === 'drugRepercussionIndex') {
    nextTick(() => {
      drugRepercussionIndexRef.value.empty()
    })
  } else if (dialogType.value === 'refundItemIndex') {
    nextTick(() => {
      refundItemRef.value.empty()
    })
  } else if (dialogType.value === 'inpBillDetailIndex') {
    nextTick(() => {
      inpBillDetailRef.value.empty()
    })
  } else if (dialogType.value === 'nurseAutoItemEnterIndex') {
    nextTick(() => {
      nurseAutoItemEnterRef.value.empty()
    })
  } else if (dialogType.value === 'orderLabelIndex') {
    nextTick(() => {
      orderLabelRef.value.empty()
    })
  }
  dialogVisible.value = false
}


/**
 * 弹出框 确定事件
 */
function confirmClick() {
  if (dialogType.value === 'patientInformation') {
    patientInfRef.value.savePatientInfo()
  } else if (dialogType.value === 'drugRepercussionIndex') {
    nextTick(() => {
      drugRepercussionIndexRef.value.submitForm()
    })
  } else if (dialogType.value === 'refundItemIndex') {
    nextTick(() => {
      refundItemRef.value.submitForm()
    })
  } else if (dialogType.value === 'nursePatDischargeIndex') {
    nextTick(() => {
      nursePatDischargeRef.value.savePatDischargeFun()
    })
  } else if (dialogType.value === 'alterBedIndex') {
    if (!alterBedId.value) {
      return ElMessage.error("新床位号不能为空，请选择新床位后再操作")
    }
    ElMessageBox.confirm('确认要进行换床操作吗？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      // 换床
      const data = {
        visitId: visitIdThis.value,
        patientId: patientIdThis.value,
        alterBedId: alterBedId.value
      }
      alterBedOk(data).then(() => {
        ElMessage.success("换床成功")
        alterBedId.value = ""
        dialogVisible.value = false
        getList()
      })
    }).catch(() => {
    })

  }
}

/**
 * 护士出院保存成功事件
 */
function dischargeSaveOk() {
  nextTick(() => {
    nursePatDischargeRef.value.empty()
    dialogVisible.value = false
    handleQuery()
  })
}

/**
 * 弹出框 取消事件
 */
function dialogClick() {
  patientInfRef.value.savePatientInfo()
}


/**
 * 转抄医嘱查看
 */
function oneClick() {
  isShowDialogPatientInfo.value = false
  orderStatus.value = "2"
  dialogTitle.value = "转抄医嘱查看"
  dialogType.value = "orderStatusTwoOrdersIndex"
  dialogVisible.value = true
  nextTick(() => {
    orderStatusTwoOrdersRef.value.getList()
  })
}

/**
 * 新开医嘱查询
 */
function twoClick() {
  isShowDialogPatientInfo.value = false
  orderStatus.value = "1"
  dialogTitle.value = "新开医嘱查看"
  dialogType.value = "orderStatusTwoOrdersIndex"
  dialogVisible.value = true
  nextTick(() => {
    orderStatusTwoOrdersRef.value.getList()
  })
}

/**
 * 处方查看
 */
function threeClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "处方查看"
  dialogType.value = "nursePrescriptionViewIndex"
  dialogVisible.value = true
  nextTick(() => {
    nursePrescriptionViewRef.value.getList()
  })
}

/**
 * 检查单查看
 */
function fourClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "检查单查看"
  dialogType.value = "nurseExamViewIndex"
  dialogVisible.value = true
  nextTick(() => {
    nurseExamViewRef.value.getList()
  })
}

/**
 * 检验单查看
 */
function fiveClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "检验单查看"
  dialogType.value = "nurseLabViewIndex"
  dialogVisible.value = true
  nextTick(() => {
    nurseLabViewRef.value.getList()
  })
}

/**
 * 出院通知单查询
 */
function sixClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 预摆药单查询
 */
function sevenClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 摆药单查询
 */
function eightClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 生成补摆药单
 */
function nineClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 补摆药单查询
 */
function tenClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 在院病人列表
 */
function elevenClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "在院病人列表"
  dialogWidth.value = '80%'
  dialogType.value = "nursePatientTableIndex"
  dialogVisible.value = true
  nextTick(() => {
    nursePatientTableRef.value.getList()
  })

}

/**
 * 出院病人列表
 */
function twelveClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "出院病人列表"
  dialogWidth.value = '90%'
  dialogType.value = "nurseLeaveHospitalTableIndex"
  dialogVisible.value = true
  nextTick(() => {
    nurseLeaveHospitalTableRef.value.getList()
  })
}

/**
 * 分类执行单
 */
function thirteenClick() {
  // classificationExecutionFormRef
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "分类执行单打印"
  dialogWidth.value = '80%'
  dialogType.value = "classificationExecutionFormIndex"
  dialogVisible.value = true
  nextTick(() => {
    classificationExecutionFormRef.value.handleQuery()
  })
}

/**
 * 床头卡
 */
function fourteenClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "患者床头卡打印"
  dialogWidth.value = '56%'
  dialogType.value = "bedCardIndex"
  dialogVisible.value = true
  nextTick(() => {
    bedCardRef.value.bedCardListFun()
  })
}

/**
 * 医嘱瓶签
 */
function fifteenClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "医嘱瓶签打印"
  dialogWidth.value = '80%'
  dialogType.value = "orderLabelIndex"
  dialogVisible.value = true
  nextTick(() => {
    orderLabelRef.value.handleQuery()
  })
}

/**
 * 一日清单
 */
function sixteenClick() {
  isShowDialogPatientInfo.value = true
  dialogTitle.value = '一日清单打印'
  dialogWidth.value = '80%'
  dialogType.value = "inpBillDetailIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    inpBillDetailRef.value.initOpen(obj)
  })
}

/**
 * 催补预交金
 */
function seventeenClick() {
  isShowDialogPatientInfo.value = false
  alert("定制化需求，需要联系我们......")
}

/**
 * 费用补录  临时代替
 */
function eighteenClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "费用补录"
  dialogWidth.value = '80%'
  dialogType.value = "nurseBillDetailIndex"
  dialogVisible.value = true
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    nurseBillDetailRef.value.initOpen(obj)
  })
}

/**
 * 费用模板维护
 */
function nineteenClick() {
  isShowDialogPatientInfo.value = false
}

function twentyClick() {
  isShowDialogPatientInfo.value = false
  dialogTitle.value = "医嘱打印"
  dialogWidth.value = '80%'
  dialogType.value = "orderListPrintIndex"
  dialogVisible.value = true
  nextTick(() => {
    orderListPrintRef.value.initVisitOrderPrint(true, null, false)
  })
}

/**
 * 父组件调用底部菜单方法
 * @param type
 */
function propsBottomMenuClick(type: string) {
  switch (type) {
    case  'one' : {
      //转抄医嘱查看
      oneClick()
      break;
    }
    case  'two' : {
      //新开医嘱查看
      twoClick()
      break;
    }
    case  'three' : {
      //处方查看
      threeClick()
      break;
    }
    case  'four' : {
      //检查单查看
      fourClick()
      break;
    }
    case  'five' : {
      //检验单查看
      fiveClick()
      break;
    }
    case  'six' : {
      //出院通知单
      sixClick()
      break;
    }
    case  'seven' : {
      //预摆药查询
      sevenClick()
      break;
    }
    case  'eight' : {
      //摆药单查询
      eightClick()
      break;
    }
    case  'nine' : {
      //生成补摆药单
      nineClick()
      break;
    }
    case  'ten' : {
      //补摆药单查询
      tenClick()
      break;
    }
    case  'eleven' : {
      //在院病人列表
      elevenClick()
      break;
    }
    case  'twelve' : {
      //出院病人列表
      twelveClick()
      break;
    }
    case  'thirteen' : {
      //分类执行单
      thirteenClick()
      break;
    }
    case  'fourteen' : {
      //床头卡
      fourteenClick()
      break;
    }
    case  'fifteen' : {
      //医嘱瓶签
      fifteenClick()
      break;
    }
    case  'sixteen' : {
      //一日清单
      sixteenClick()
      break;
    }
    case  'seventeen' : {
      //催补预交金
      seventeenClick()
      break;
    }
    case  'eighteen' : {
      eighteenClick()
      //费用补录
      break;
    }
    case  'nineteen' : {
      //费用模板维护
      nineteenClick()
      break;
    }
    case  'twenty' : {
      //医嘱打印
      twentyClick()
      break;
    }
  }
}

defineExpose({
  propsBottomMenuClick
})

getBedRecGroupFun()
listSysOrgDictFun()
getOrgVsUserListFun()
onUpdated(() => {
  bedRecList.value.forEach((item, index) => {
    nurseClassChangeOk(item.nursingClass, index, item)
  })
})

onMounted(() => {
  // 1. 组件挂载时初始化：从 Pinia 状态读取已选中科室（处理路由刷新场景）
  // 如果用户已选择科室（如页面刷新后状态保留），直接加载数据
  if (useUserStore.user.currentSelectDept) {
    // 将全局状态中的科室 ID 同步到本地组件状态
    currentSelectDept.value = useUserStore.user.currentSelectDept
    // 执行数据加载逻辑（列表、图表等）
    handleQuery()
  }
  // 2. 监听科室切换事件（处理用户主动切换科室场景）
  // 通过事件总线监听 Navbar 组件触发的科室切换事件
  eventBus.on('navbarDeptChange', (newDeptId: string) => {
    // 更新本地组件的科室 ID 状态
    currentSelectDept.value = newDeptId;
    // 执行数据加载逻辑（刷新列表、图表等）
    handleQuery()
  });
});
// 组件卸载时移除监听（避免内存泄漏）
onUnmounted(() => {
  eventBus.off('navbarDeptChange');
});
</script>

<style lang="scss" scoped>
.bed-card {
  border-radius: 8px;
  max-width: 350px;
  min-width: 274px;
  flex: 0.5;
}

.card-div {
  // background-color: #5c6cb4;
  color: #fff;
  padding-left: 10px;
  border-radius: 0px 7px 7px 0px;
}

.div-conter {
  margin-top: -8px;
  height: 27px;
  line-height: 27px;
  font-size: 12px;
}

// 默认患者信息
.bed-card-show {
  background-color: #16b5f6;
  border-radius: 7px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  padding: 0 2px 0 2px;
}

:deep(.el-card__header) {
  // height: 26px;
  // margin-top: 20px;
  padding: 15px 8px 0px 8px;
}

.click-div {
  background-color: #76cced;
}

.center-div {
  font-size: 13px;
}

.ping-pu {
  text-align-last: justify;
  width: 89px;
  display: inline-block;
}

.footer-div {
  border-radius: 10px;
  padding: 5px 5px 0px 12px;
  margin-top: -15px;
  margin-bottom: -15px;

}

.card-header {
  .card-header-name {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
    color: #333338;
    // line-height: 20px;
    text-align: left;
  }

  .card-header-sex {
    display: inline-block;
    margin: 0 10px;
    font-size: 12px;
    color: #98999B;
  }
}

.footer-div {
  display: flex;
  justify-content: space-between;

  .footer-div-info {
    text-align: center;

    .footer-div-info-num {
      font-size: 14px;
      color: #333338;
    }

    .footer-div-info-text {
      font-size: 11px;
      color: #98999B;
    }
  }
}

:deep(.el-card__footer) {
  padding: 18px 4px;
}

:deep(.el-card__body) {
  padding: 5px 20px 5px 20px;
}
</style>
